<template>
  <div id="login" :style="{width:IW+'vw',height:IW+'vh'}">
    <div class="login-box box-center">
        <h1 class="default-color">管理与维护系统</h1>
      <div class="login-box-log">
      </div>
      <div class="login-box-cont">
        <div class="row">
          <el-input placeholder="用户名/手机号码/工号" v-model="username" @keyup.enter.native="FNlogin"></el-input>
          <i class="input-icon"></i>
        </div>
        <div class="row">
          <el-input placeholder="请输入密码" type="password" v-model="passwordVal" @keyup.enter.native="FNlogin"></el-input>
          <i class="input-icon input-icon-password"></i>
        </div>
        <div class="row">
          <el-button type="primary" @click="FNlogin">登录</el-button>
        </div>
        <div class="row clearfix">
          <div class="row-item fl">
            <el-checkbox v-model="savePassword">保存密码</el-checkbox>
          </div>
          <div class="row-item fr">
            <span>忘记密码</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Login,Code,LoginAllPermission} from '@/axios/api.js'
import md5 from "js-md5"
export default {
  name: '',
  data(){
    return {
      savePassword:false,//保存密码
      username:'',
      passwordVal:'',
    }
  },
  props:[],
  created(){
    var savePassword = window.localStorage.getItem('userAndPass');
    if(savePassword) {//是否保存密码
      this.username = JSON.parse(savePassword).userName
      this.passwordVal = window.atob(JSON.parse(savePassword).passwordVal)
      // console.log(atob(this.passwordVal))
      this.savePassword = true
    }
  },
  mounted(){

  },
  methods:{
    FNlogin(){
      if(!this.username||!this.passwordVal){
        this.$message.error('用户名或密码不能为空');
        return;
      }
      Login({
        orderNo:this.username,
        password:md5(this.passwordVal)
      }).then(res=>{
        if(res.state == Code) {
            if(this.savePassword) {//有没有勾选了保存密码
              var obj = {userName:this.username,passwordVal:window.btoa(this.passwordVal)}
              window.localStorage.setItem('userAndPass',JSON.stringify(obj))
            }
          this.$message.success('登录成功');
              this.$router.push({name:'index'});
              window.sessionStorage.setItem("user",JSON.stringify(res))
        }
      })
    }
  },
  components:{

  },
  computed:{
    IW:function(){
      return 100
    }
  },
  watch:{
    'savePassword':{
      handler:function(n,o) {
        if(n) {
          if(this.username===''||this.passwordVal==='') {
            this.$message.error("请先填写账户名跟密码再保存")
            return
          }
          var obj = {userName:this.username,passwordVal:window.btoa(this.passwordVal)}
          window.localStorage.setItem('userAndPass',JSON.stringify(obj))
        }else {
          this.username = this.passwordVal = ''
          window.localStorage.removeItem('userAndPass')
        }
      },
      deep:true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
#login {
  background: url('../img/login-bg.jpg') center top no-repeat;
  background-size: cover;
  .login-box {
    width: 400px;
    border-radius:2px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    h1 {
        text-align: center;
        font-size: 24px;
        line-height:40px;
        font-weight:bold;
    }
    .login-box-log {
      height: 40px;
      line-height: 80px;
      background-color: #fff;
      color:#fff;
      border-radius: 3px 3px 0 0;
      
    }
    .login-box-cont {
      background-color: #fff;
      padding: 0px 60px 20px;
      border-radius: 0px 0 3px 3px;
      .row {
        margin-bottom: 15px;
        position: relative;
        .input-icon {
          position: absolute;
          left: 0;
          top: 10px;
          width: 30px;
          height: 40px;
          // background: url('../img/header.png') center top no-repeat;
          background-size: 50%;
        }
        .input-icon-password {
          // background-image: url('../img/encryption.png')
        }
        .el-button {
          width: 100%;
          height: 40px;
        }
      }
    }
  }
}
</style>
